import React, { Component } from 'react';
import { Link } from 'react-router';
import { inject, observer } from 'mobx-react';
import { Toast, ListView, Picker, Flex, InputItem, List } from 'antd-mobile'
import { createForm } from 'rc-form';
import Top from 'components/top'
import Ajax from 'lib/Ajax'
import ListMixin from 'mixin/list'

const CustomChildren = props => (
  <div
    onClick={props.onClick}
    style={{ backgroundColor: '#fff', padding: '0 0.3rem' }}
  >
    <div style={{ display: 'flex', height: '0.9rem', lineHeight: '0.9rem' }}>
      <div style={{ flex: 1, overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}>{props.children}</div>
      <div style={{ textAlign: 'right', color: '#888' }}>{props.extra}</div>
    </div>
  </div>
);

@inject('appStore', 'languageStore')
@observer
class ModuleName extends ListMixin {
  constructor(props) {
    super(props);
    this.listApi = '/school/list';
    const { countryId } = this.props.params;
    this.state = Object.assign({
      countryId: countryId?[parseInt(countryId)]:'',
      name: ''
    }, this.state);
    this.searchOption = countryId?{
      countryId
    }:{}
  }

  // componentDidMount(){
  //   this.fetchSchool(1)
  // }

  renderRow = (rowData, sectionID, rowID)=>{
    const { imgBaseUrl, commonData } = this.props.appStore;
    return (
        <div key={rowID} className="img-item">
          <Link to={`/school/${rowData.schoolId}`}>
            <div className="img-box">
              <img src={`${imgBaseUrl}${rowData.coverImg}`} alt=""/>
              <p>10人录取 录取率为20%</p>
            </div>
            <div className="row-text">
              <div className="t">
                <div className="fr">
                  <span className="fr">{rowData.ielts}<i>IELTS</i></span>
                  <span className="fr">{rowData.gpa}<i>GPA</i></span>
                </div>
                {rowData.name}<i>{rowData.engName}</i>
              </div>
            </div>
          </Link>
          <div className="blank" style={{height: '.2rem'}}></div>
        </div>
      );
  }

  render() {
    const pageData = this.props.languageStore.getPageData('school');

    const { imgBaseUrl, commonData } = this.props.appStore;
    const countryEn = (commonData.countryEn||[]).map(item => {
      return {
        value: item.code,
        label: item.mean
      }
    });
    return (
      <div className="school">
        <Top
          title={pageData.title}
        />
        <div className="school-con">
          <div className="filter">
            <Flex>
              <Flex.Item>
                <List>
                  <Picker data={countryEn} cols={1} value={this.state.countryId} onChange={(value)=>{
                      this.doSearch({countryId: value[0]});
                      this.setState({countryId: value});
                    }} className="forss">
                     <List.Item arrow="horizontal">国家</List.Item>
                  </Picker>
                </List>
              </Flex.Item>
              <Flex.Item>
                <InputItem placeholder="请输入学校名称" value={this.state.name} onChange={(value)=>{
                    this.doSearch({name: value});
                    this.setState({name: value});
                  }}></InputItem>
              </Flex.Item>
            </Flex>
          </div>
          <div className="list">
            <ListView ref="lv"
              dataSource={this.state.dataSource}
              renderFooter={this.renderFooter}
              renderRow={this.renderRow}
              className="fortest"
              pageSize={4}
              scrollRenderAheadDistance={500}
              scrollEventThrottle={20}
              onScroll={() => { console.log('scroll'); }}
              onEndReached={this.onEndReached}
              onEndReachedThreshold={10}
              stickyHeader
            />
          </div>
        </div>
      </div>
    )
  }
}


module.exports = ModuleName
